<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页标题 -->
    <title>视频上传和参数输入</title>
</head>

<body>
    <h1>视频上传和参数输入</h1>
    <!-- 创建uploadForm表单，收集用户信息 -->
    <form id="uploadForm">
        <!-- 收集video文件 -->
        <label for="videoInput">选择视频:</label>
        <input type="file" id="videoInput" name="video" accept="video/*" 
required><br><br>

        <!-- 设置下拉选择菜单，收集人物位置 -->
        <label for="sideInput">选择人物位置:</label>
        <select id="sideInput" name="side">
            <option value="0">单人视频</option>
            <option value="1">左边人物</option>
            <option value="2">右边人物</option>
        </select><br><br>
        <!-- 设置数字输入，收集用户身高 -->
        <label for="heightInput">输入身高 (cm):</label>
        <input type="number" id="heightInput" name="height" 
value="170" required><br><br>
        <!-- 创建*上传视频*按钮，点击后运行uploadVideo函数 -->
        <button type="button" onclick="uploadVideo()">上传视频</button>
    </form>  <!-- 结束表单 -->

    <script>
        function uploadVideo() {
            // 检查视频文件，如果为空，提示
            // console.log('这是一条打印到控制台的消息。');
            var videoInput = document.getElementById('videoInput');
            if (videoInput.value === '') {
                alert('请先选择一个视频文件');
                return;
            }
            // 创建新的formData对象将uploadForm表单封装起来
            var formData = new 
FormData(document.getElementById('uploadForm'));
            // 使用fetch API 发送POST请求到服务器的 /invideo 路径，携带formData作为请求体。
            fetch('/invideo', {
                method: 'POST',
                body: formData,
            })
            // 将响应体解析为 JSON。
            .then(response => {
                if (response.ok) {
                    return response.json();
                }
                throw new Error('Network response was not ok.');
            })
            .then(data => {
                alert('运行已经完成。');
                // return;
            })
            // 出现错误时，显示在控制台
            .catch(error => {
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html>